<template>
  <div class="sidebar-menu-inner">
    <!-- <ul>
      <li class="sidebar-item">
        <a href="#term-2"
           class="smooth">
          <i class="io io-fuwu icon-fw icon-lg"></i>
          <span>常用推荐</span>
        </a>
      </li>
    </ul> -->

    <div class="list">
      <el-menu class="elMenu"
               background-color="#2c2e2f"
               text-color="#B0B0B2"
               active-text-color="#fff"
               ref="elMenu"
               @open="handleOpen"
               @close="handleClose">
        <template v-for="(item,index) in navigateItem">
          <template v-if="item.items === null || item.items.length === 0"><!--一级菜单-->
            <el-menu-item :index="index"
                          :key="index">
              <a :href="`#${item.path}`"
                 @click.prevent="scrollToSection(item.path)"
                 class="smooth">{{item.title}}</a>
            </el-menu-item>
          </template>

          <template v-else>
            <el-sub-menu :index="index"
                         :key="item.path">
              <template #title>
                <span>{{item.title}}</span>
              </template>
              <template v-for="(children,k) of item.items">
                <template v-if="!children.isHidden">
                  <el-menu-item :index="k"
                                :key="children.path">
                    <span>{{children.title}}</span>
                  </el-menu-item>
                </template>
              </template>
            </el-sub-menu>
          </template>

        </template>

      </el-menu>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import navigateItem from '../data/routers'

console.log(navigateItem, '23223')

const isCollapse = ref(false)

const activeIndex = ref('0')

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const scrollToSection = (sectionId: string) => {
  console.log(sectionId, 111111)
  const element = document.getElementById(sectionId)
  if (element) {
    window.scrollTo({
      top: element.offsetTop,
      behavior: 'smooth' // 平滑滚动效果
    })
  }
}
</script>

<style lang="less" scoped>
/deep/.el-menu {
  border-right: none;
}

/deep/.el-menu-item {
  .smooth {
    color: #b0b0b2;
  }
}

/deep/.is-active {
  .smooth {
    color: #fff;
  }
}

/deep/.is-active {
  background-color: rgb(35, 37, 38);
}

.sidebar-menu-inner {
  .flex-fill {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-item {
    position: relative;
    display: block;
    a {
      color: #c6c9cf;
      display: flex;
      overflow: hidden;
      margin: 1.5px 8px;
      align-items: center;
      white-space: nowrap;
      transition: all 0.3s;
      font-size: 15px;
      span {
        margin-left: 8px;
      }
    }
    a:hover {
      color: #f1404b;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }
  }

  ul:first-child > li > a {
    padding: 12px 10px;
  }

  .icon-fw {
    text-align: center;
    width: 1.25em;
  }

  .io {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
  }

  .icon-lg {
    font-size: 1.333rem;
    line-height: 1.333rem;
    vertical-align: -0.0667em;
  }

  .sidebar-nav ul {
    margin: 0;
    padding: 0;
    background: #f0f2f4;
  }
}
</style>